<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    });
</script>
<!-- jQplot CSS -->

<link rel="stylesheet" media="screen" href="${ctx}/css/Tree.css"/>
<!-- jQplot CSS END -->

<!-- DATATABLES CSS -->
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>
<!-- DATATABLES CSS END -->

<script>
    $(document).ready(function() {
        $('#simple-button').popover('#simple-popover', {});
        $('#top-button').popover('#top-popover', {preventLeft: true, preventRight: true, preventBottom:true});
    });
</script>

<h1 class="page-title">樟州分公司生成劳动合同向导</h1>

<div class="container_12 clearfix leading">
<div class="grid_12">
<!-- wizard -->
<form id="contract_form" method="post" class="wizard" novalidate>
<s:if test="#request.contractSignZz.id>0">
    <input type="hidden" name="contractSignZz.id" value="${contractSignZz.id}"/>
</s:if>
<input type="hidden" name="contractSignZz.employeeinfoBase.id" value="${baseinfo.id}">
<input type="hidden" name="reSignContractSignZzId" value="${reSignContractSignZzId}">
<nav>
    <ul class="clearfix">
        <li class="active"><strong>1.</strong> 合同封面</li>
        <li><strong>2.</strong> 工作地</li>
        <li><strong>3.</strong> 合同期限</li>
        <li><strong>4.</strong> 工时制度</li>
        <li><strong>5.</strong> 工资标准</li>
        <li><strong>6.</strong> 发薪日、其他事项</li>
        <li><strong>7.</strong> 完成</li>
    </ul>
</nav>

<div class="items">

<!-- page1 -->
<section>
    <header>
        <h2>
            <strong>步骤 1: </strong> 输入合同封面信息
            <em>Enter the employees' basic information:</em>
        </h2>
    </header>

    <section>
        <ul class="clearfix">
            <!-- email -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 甲方（用人单位）名称 <span>*</span><br/>
                    <input type="text" class="full" id="companyName" name="contractSignZz.companyName" value="${contractSignZz.companyName}" required/>
                </label>
                <label>
                    <strong>1.</strong> 乙方（劳动者）姓名 <span>*</span><br/>
                    <input type="text" class="full" id="e_name" name="contractSignZz.name" readonly="readonly" value="${baseinfo.name}" required/>
                </label>
            </li>

            <li class="required double">
                <label>
                    <strong>1.</strong> 单位地址 <span>*</span><br/>
                    <input type="text" class="full" id="comAddress" name="contractSignZz.comAddress" value="${contractSignZz.comAddress}" required/>
                </label>
                <label>
                    <strong>1.</strong> 性别 <span>*</span><br/>
                    <input type="text" class="full" id="sex" name="contractSignZz.sex" value="${contractSignZz.sex}" required/>
                </label>
            </li>

            <li class="required double">
                <label>
                    <strong>1.</strong> 法定代表人（主要负责人）或者委托代理人 <span>*</span><br/>
                    <input type="text" class="full" id="principal" name="contractSignZz.principal" value="${contractSignZz.principal}" required/>
                </label>
                <label>
                    <strong>1.</strong> 出生年月 <span>*</span><br/>
                    <input type="text" class="full" id="birth" name="contractSignZz.birth" value="${contractSignZz.birth}" required/>
                </label>
            </li>

            <li class="required double">
                <label>
                    <strong>1.</strong> 电话 <span>*</span><br/>
                    <input type="text" class="full" id="comPhone" name="contractSignZz.comPhone" value="${contractSignZz.comPhone}" required/>
                </label>
                <label>
                    <strong>1.</strong> 现居住地址 <span></span><br/>
                    <input type="text" class="full" id="address" name="contractSignZz.address" value="${baseinfo.address}"/>
                </label>
            </li>

            <li class="required double">
                <label>
                </label>
                <label>
                    <strong>1.</strong> 户籍所在地地址 <span></span><br/>
                    <input type="text" class="full" id="census" name="contractSignZz.census" value="${baseinfo.census}"/>
                </label>
            </li>

            <li class="required double">
                <label>
                </label>
                <label>
                    <strong>1.</strong> 居民身份证号码（或其他有效身份证证件号码） <span></span><br/>
                    <input type="text" class="full" id="idcard" name="contractSignZz.idcard" value="${baseinfo.idcard}"/>
                </label>
            </li>
            <!-- username --><!-- password -->
        </ul>
    </section>

    <footer class="clearfix">
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>

</section>

<!-- page2 -->
<section>
    <header>
        <h2>
            <strong>步骤 2: </strong> 输入工作地点及岗位信息 <b></b>
            <em>Enter the staff for more information:</em>
        </h2>
    </header>
    <section>
        <ul class="clearfix">
            <!-- address -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 工作地点 <span>*</span><br/>
                    <input type="text" class="full" id="work_place" name="contractSignZz.work_place"
                           value="${contractSignZz.work_place}"/>
                </label>
                <label>
                    <strong>1.</strong> 职务(工种) <span>*</span><br/>
                    <input type="text" class="full" id="duty" readonly="readonly" value="${duty.dutyName}"/>
                    <input type="hidden" name="contractSignZz.duty.id" value="${duty.id}"/>
                </label>
            </li>
            <!-- zip / city -->
        </ul>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev fl">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>
</section>


<!-- page3 -->
<section>
    <header>
        <h2>
            <strong>步骤 3: </strong> 输入本合同期限
            <em>合同期限</em>
        </h2>
    </header>

    <section>
        <div class="accordion" id="contract_type_div">
            <header class="current" id="contract_type_header_1">
                <h2><input type="radio" name="contractSignZz.contractType" value="1" checked="checked"  onclick="changeBeginDate(1)" id="contract_type_radio_1"> 固定期限</h2>
            </header>
            <section class="clearfix" style="display: block;" id="contract_type_section_1">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 合同起始时间 <span>*</span><br/>
                        <input type="text" class="full" id="section1_beginDate" name="contractSignZz.beginDate" onfocus="WdatePicker({maxDate:$('#section1_endDate').val()})" value='<s:date name="#request.contractSignZz.beginDate" format="yyyy-MM-dd"/>'/>
                    </label>
                    <label>
                        <strong>1.</strong> 合同终止时间 <span>*</span><br/>
                        <input type="text" class="full" id="section1_endDate" name="contractSignZz.endDate" onfocus="WdatePicker({minDate:$('#section1_beginDate').val()})" value='<s:date name="#request.contractSignZz.endDate" format="yyyy-MM-dd"/>'/>
                    </label>
                </li>

                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 试用期起始时间 <span>*</span><br/>
                        <input type="text" class="full" id="syq_beginDate" name="contractSignZz.syqStartDate" onfocus="WdatePicker({maxDate:$('#syq_endDate').val()})" value='<s:date name="#request.contractSignZz.syqStartDate" format="yyyy-MM-dd"/>'/>
                    </label>
                    <label>
                        <strong>1.</strong> 试用期终止时间 <span>*</span><br/>
                        <input type="text" class="full" id="syq_endDate" name="contractSignZz.syqEndDate" onfocus="WdatePicker({minDate:$('#syq_beginDate').val()})" value='<s:date name="#request.contractSignZz.syqEndDate" format="yyyy-MM-dd"/>'/>
                    </label>
                </li>
            </section>
            <header id="contract_type_header_2">
                <h2><input type="radio" name="contractSignZz.contractType" value="2" onclick="changeBeginDate(2)" id="contract_type_radio_2"> 无固定期限</h2>
            </header>
            <section class="clearfix" id="contract_type_section_2">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 合同起始时间 <span>*</span><br/>
                        <input type="text" class="full" id="section2_beginDate" name="" value="${contractSignZz.beginDate}" onfocus="WdatePicker()"/>
                    </label>
                </li>
            </section>
            <header id="contract_type_header_3">
                <h2><input type="radio" name="contractSignZz.contractType" value="3" id="contract_type_radio_3"> 以完成一定工作（任务）为期限 </h2>
            </header>
            <section class="clearfix" id="contract_type_section_3">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 自用工之日 <span>*</span><br/>
                        <input type="text" class="full" id="taskStart" name="contractSignZz.taskStart" onfocus="WdatePicker()" value='<s:date name="#request.contractSignZz.taskStart" format="yyyy-MM-dd"/>'/>
                    </label>
                    <label>
                        <strong>1.</strong> 工作（任务）完成 <span>*</span><br/>
                        <input type="text" class="full" id="taskName" name="contractSignZz.taskName" value="${contractSignZz.taskName}"/>
                    </label>
                </li>
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 试用期起始时间 <span>*</span><br />
                        <input type="text" class="full" id="syq_beginDate2" name="syqStartDate" onfocus="WdatePicker({maxDate:$('#syq_endDate2').val()})" value='<s:date name="#request.contractSignZz.syqStartDate" format="yyyy-MM-dd"/>'/>
                    </label>
                    <label>
                        <strong>1.</strong> 试用期终止时间 <span>*</span><br />
                        <input type="text" class="full" id="syq_endDate2" name="syqEndDate" onfocus="WdatePicker({minDate:$('#syq_beginDate2').val()})" value='<s:date name="#request.contractSignZz.syqEndDate" format="yyyy-MM-dd"/>'/>
                    </label>
                </li>
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 期限为(天) <span>*</span><br />
                        <input type="text" class="full" id="syqDays" name="contractSignZz.syqDays" value="${contractSignZz.syqDays}" />
                    </label>
                </li>
            </section>
        </div>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>
</section>

<!-- page4 -->
<section>

    <header>
        <h2>
            <strong>步骤 4: </strong> 输入工时制度
            <em>工时制度</em>
        </h2>
    </header>

    <section>
        <ul class="clearfix">
            <!-- address -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 工时制度 <span>*</span><br/>
                    <select id="manHaur" name="contractSignZz.manHaur" class="full">
                        <option value="0">-- 请选择 --</option>
                        <option value="1">1、标准工时工作制度</option>
                        <option value="2">2、综合计算工时工作制度</option>
                        <option value="3">3、不定时工作制度</option>
                    </select>
                </label>
            </li>
            <!-- zip / city -->
        </ul>
        <ul class="clearfix">
            <!-- address -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 完成工作数量 <span>*</span><br />
                    <input type="text" class="full" id="amount" name="contractSignZz.amount" value="${contractSignZz.amount}" />
                </label>
                <label>
                    <strong>1.</strong> 达到质量标准 <span>*</span><br />
                    <input type="text" class="full" id="quality" name="contractSignZz.quality" value="${contractSignZz.quality}"/>
                </label>
            </li>
            <!-- zip / city -->
        </ul>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>

</section>


<!-- page5 -->
<section>

    <header>
        <h2>
            <strong>步骤 5: </strong> 输入工资标准
            <em>工资标准</em>
        </h2>
    </header>

    <section>
        <div class="accordion" id="pay_type_div">
            <header class="current" id="pay_type_header_1">
                <h2><input type="radio" name="contractSignZz.payType" value="1" id="pay_type_radio_1" checked="checked"> 实行计工时工资制</h2>
            </header>
            <section class="clearfix" style="display: block;" id="pay_type_section_1">
                <li class="required" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 试用期月工资 <span>*</span><br />
                        <input type="text" class="full" id="syqSalary" name="contractSignZz.syqSalary" value="${contractSignZz.syqSalary}"/>
                    </label>
                    <label>
                    </label>
                </li>
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 组成部分名称 <span>*</span><br />
                        <input type="text" class="full" id="partName1" name="contractSignZz.partName1" value="${contractSignZz.partName1}"/>
                    </label>
                    <label>
                        <strong>1.</strong> 该组成部分的工资标准(元/月) <span>*</span><br />
                        <input type="text" class="full" id="partSalary1" name="contractSignZz.partSalary1" value="${contractSignZz.partSalary1}"/>
                    </label>
                </li>
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 组成部分名称 <br />
                        <input type="text" class="full" id="partName2" name="contractSignZz.partName2" value="${contractSignZz.partName2}"/>
                    </label>
                    <label>
                        <strong>1.</strong> 该组成部分的工资标准(元/月) ><br />
                        <input type="text" class="full" id="partSalary2" name="contractSignZz.partSalary2" value="${contractSignZz.partSalary2}"/>
                    </label>
                </li>
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 组成部分名称 <br />
                        <input type="text" class="full" id="partName3" name="contractSignZz.partName3" value="${contractSignZz.partName3}"/>
                    </label>
                    <label>
                        <strong>1.</strong> 该组成部分的工资标准(元/月) <br />
                        <input type="text" class="full" id="partSalary3" name="contractSignZz.partSalary3" value="${contractSignZz.partSalary3}"/>
                    </label>
                </li>
            </section>
            <header id="pay_type_header_2">
                <h2><input type="radio" name="contractSignZz.payType" value="2" id="pay_type_radio_2"> 实行计件工资制</h2>
            </header>
            <section class="clearfix" id="pay_type_section_2">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 计件单价 <span>*</span><br/>
                        <input type="text" class="full" id="pieceRatePay" name="contractSignZz.pieceRatePay" value="${contractSignZz.pieceRatePay}"/>
                    </label>
                </li>
            </section>
            <header id="pay_type_header_3">
                <h2><input type="radio" name="contractSignZz.payType" value="3" id="pay_type_radio_3"> 其他工资形式
                </h2>
            </header>
            <section class="clearfix" id="pay_type_section_3">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 支付形式 <span>*</span><br/>
                        <input type="text" class="full" id="payOther" name="contractSignZz.payOther" value="${contractSignZz.payOther}"/>
                    </label>
                </li>
            </section>
        </div>

    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>

</section>


<!-- page6 -->
<section>
    <header>
        <h2>
            <strong>步骤 6: </strong> 输入发薪日及其他约定事项
            <em>发薪日及其他约定事项</em>
        </h2>
    </header>

    <section>
        <li class="required" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 发薪日 <span>*</span><br/>
                <input type="text" class="full" id="payDate" name="contractSignZz.payDate" value="${contractSignZz.payDate}" onblur="checkForInt(this, '请正确填写发薪日期', 5)"/>
            </label>
        </li>
        <li class="required" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 甲方出资，为乙方提供法定以外培训的约定 <br />
                <textarea id="trainTreaty" name="contractSignZz.trainTreaty" rows="5" class="full">${contractSignZz.trainTreaty}</textarea>
            </label>
        </li>
        <li class="required" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 保守商业秘密的约定<br />
                <textarea id="businessTreaty" name="contractSignZz.businessTreaty" rows="5" class="full">${contractSignZz.businessTreaty}</textarea>
            </label>
        </li>
        <li class="required" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 补充保险和福利待遇的约定<br />
                <textarea id="welfareTreaty" name="contractSignZz.welfareTreaty" rows="5" class="full">${contractSignZz.welfareTreaty}</textarea>
            </label>
        </li>
        <li class="required" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 其他事项的约定 <br />
                <textarea id="otherTreaty" name="contractSignZz.otherTreaty" rows="5" class="full">${contractSignZz.otherTreaty}</textarea>
            </label>
        </li>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr" onclick="submitForm()">下一步 &raquo;</button>
    </footer>
</section>


<!-- page7 -->
<section>

    <header>
        <h2>
            <strong>步骤 7: </strong> 完成!
            <em>员工：<span id="contract_UserName">${baseinfo.name}</span>的合同已在系统中生成成功.</em>
        </h2>
    </header>

    <section>
        <h3>本次录入用时<span id="contract_totalTime"></span>!</h3>
    </section>

    <footer class="clearfix">
        <!--<button type="button" class="prev">&laquo; 上一步</button>-->
        <a href="#contract/conAudit.xhtml" class="button"><span class="icon" style="background:url(${ctx}/images/img/arrow_undo.png)">&nbsp;</span>返回</a>
    </footer>

</section>
</div>
<!--items-->
</form>
<!--wizard-->
</div>
</div>

<!-- WIZARD SETUP -->
<script type="text/javascript" src="js/jquery.wizard.js"></script>
<script type="text/javascript" src="${ctx}/js/global_util.js"/>
<script>
    $(function() {
        if("${contractSignZz == null || contractSignZz.id == null}" == "true"){//添加
            $("#sex").val("${baseinfo.sex == '0' ? "男" : "女"}");
            $("#birth").val('<s:date name="#request.baseinfo.birthday" format="yyyy-MM-dd"/>');
        }
        $('.wizard').wizard();
        setTimeout("initStep3()", 1000);
        setTimeout("initStep5()", 1500);
    });

    //init contract type
    function initStep3() {
        var contractType = "${contractSignZz.contractType}";
        if (contractType > 0) {
            $("#contract_type_div header").removeClass("current");
            $("#contract_type_div section").hide();
            $("#contract_type_radio_" + contractType).attr("checked", true);
            $("#uniform-contract_type_radio_1 span:first").removeClass("checked");
            $("#uniform-contract_type_radio_${contractSignZz.contractType} span:first").addClass("checked");
            $("#contract_type_header_" + contractType).addClass("current");
            $("#contract_type_section_" + contractType).show();
        }

        if(contractType == 3){
            $("#syq_beginDate").val("");
            $("#syq_endDate").val("");
        }else if(contractType == 1){
            $("#syq_beginDate2").val("");
            $("#syq_endDate2").val("");
        }

        var manHaur = "${contractSignZz.manHaur}";
        $("#manHaur").val(manHaur);
        $("#manHaur").prev("span").html($("#manHaur").get(0).options[manHaur].text);
    }
    //init pay type
    function initStep5() {
        var payType = "${contractSignZz.payType}";
        if (payType > 0) {
            $("#pay_type_div header").removeClass("current");
            $("#pay_type_div section").hide();
            $("#pay_type_radio_" + payType).attr("checked", true);
            $("#uniform-pay_type_radio_1 span:first").removeClass("checked");
            $("#uniform-pay_type_radio_${contractSignZz.payType} span:first").addClass("checked");
            $("#pay_type_header_" + payType).addClass("current");
            $("#pay_type_section_" + payType).show();
        }

    }

    function checkForInt(obj, msg, defaultValue) {
        if (!checkInt($(obj).val())) {
            $(obj).val(defaultValue);
            return false;
        }
    }

    function submitForm() {
        $("input[type='radio'][name='contractSignZz.contractType']").each(function() {
            if ($(this).parent(".checked").length == 1) {
                $(this).attr("checked", true);
                return false; //退出each(相当于break, return true相当于continue)
            }
        });
        $("input[type='radio'][name='contractSignZz.payType']").each(function() {
            if ($(this).parent(".checked").length == 1) {
                $(this).attr("checked", true);
                return false; //退出each(相当于break, return true相当于continue)
            }
        });
        var url = "${ctx}/ajax/contract_sign_zz_add.xhtml?version.id=${version.id}";
        $.ajax(url, {
            type:"POST",
            data:$("#contract_form").serialize(),
            dataType:"json",
            cache:false,
            success:function(totalTime) {
                $("#contract_totalTime").html(totalTime);
            },
            complete:function(b) {
            }
        });
    }

    function  changeBeginDate(obj){
        if(obj==1){
            $("#section1_beginDate").attr("name","contractSignZz.beginDate");
            $("#section2_beginDate").attr("name","");
        }else{
            $("#section2_beginDate").attr("name","contractSignZz.beginDate");
            $("#section1_beginDate").attr("name","");
        }
    }
</script>
<!-- WIZARD SETUP END -->